{% extends 'common/base.html' %}
{% load static %}
{% block title %} 加班汇总报表 {% endblock %}
{% block jscript %} <script src="{% static 'plugins/echarts/echarts.min.js' %}"></script>{% endblock %}
{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/attendance.css' %}">{% endblock %}
{% block content %}
    <h1 style="text-align: center">加班汇总报表</h1>
    <div id="user_total" style="width: 100%;height:600px; margin-top: 20px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var userTotalChart = echarts.init(document.getElementById('user_total'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '全年各人加班趋势统计',
                left: 'center'
            },
            toolbox: {
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: {{ user_total_dict.xAxis_data | safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: {{ user_total_dict.series_data }},
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                }
                {#itemStyle : { normal: {label : {show: true}}}#}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        userTotalChart.setOption(option);
    </script>

    <div id="role_total" style="width: 100%;height:600px; margin-top: 20px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var roleTotalChart = echarts.init(document.getElementById('role_total'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '全年各角色加班趋势统计',
                left: 'center'
            },
            toolbox: {
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: {{ role_attend.xAxis_data | safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: {{ role_attend.series_data }},
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                }
                {#itemStyle : { normal: {label : {show: true}}}#}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        roleTotalChart.setOption(option);
    </script>

    <div id="project_total" style="width: 100%;height:600px; margin-top: 20px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var projectTotalChart = echarts.init(document.getElementById('project_total'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '全年各项目组加班趋势统计',
                left: 'center'
            },
            toolbox: {
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: {{ project_total_dict.xAxis_data | safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: {{ project_total_dict.series_data }},
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                }
                {#itemStyle : { normal: {label : {show: true}}}#}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        projectTotalChart.setOption(option);
    </script>

    <div id="month_total" style="width: 100%;height:600px; margin-top: 20px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var monthTotalChart = echarts.init(document.getElementById('month_total'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '全年按月加班趋势统计',
                left: 'center'
            },
            toolbox: {
                feature: {
                    magicType: {type: ['line', 'bar']},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: {{ month_total_dict.xAxis_data | safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: {{ month_total_dict.series_data | safe }},
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                }
                {#itemStyle : { normal: {label : {show: true}}}#}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        monthTotalChart.setOption(option);
    </script>

    <div id="project_month_statics" style="width: 100%;height:600px; margin-top: 20px"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var projectMonthStatics = echarts.init(document.getElementById('project_month_statics'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '各项目按月加班趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: {{ month_project_attend.legend | safe }}
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                }
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {{ month_project_attend.xAxis_data | safe }}
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {% for mmds in month_project_attend.series %}
                {
                name: '{{ mmds.project | safe }}',
                type: 'bar',
                label: {
                    show: true,
                    position: 'top'
                },
                data: {{ mmds.data | safe }},
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                    },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
                },
            {% endfor %}
{#                {% for mmds in month_project_attend.series %}#}
{#                {#}
{#                    name: '{{ mmds.project | safe }}',#}
{#                    type: 'line',#}
{#                    stack: '总量',#}
{#                    data: {{ mmds.data | safe }}#}
{#                },#}
{#                {% endfor %}#}
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        projectMonthStatics.setOption(option);
    </script>
    <div id="user_month_statics">
        <h4>个人按月加班数汇总报表</h4>
        <table class="table table-striped">
    {#    <caption>个人按月加班数汇总报表</caption>#}
        <thead>
            <th>姓名</th>
        {% for month in month_user_attend.xAxis_data %}
            <th>{{ month }}</th>
        {% endfor %}
        </thead>
        <tbody>
        {% for mua in month_user_attend.series %}
            <tr><td>{{ mua.user }}</td>
                {% for md in mua.data %}
                <td>{{ md }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
        </table>
    </div>

{#    <div id="user_month_statics" style="width: 100%;height:600px;"></div>#}
{#    <script type="text/javascript">#}
{#        // 基于准备好的dom，初始化echarts实例#}
{#        var userMonthStatics = echarts.init(document.getElementById('user_month_statics'));#}
{##}
{#        // 指定图表的配置项和数据#}
{#        option = {#}
{#            title: {#}
{#                text: '全年各月份个人加班趋势'#}
{#            },#}
{#            tooltip: {#}
{#                trigger: 'axis'#}
{#            },#}
{#            legend: {#}
{#                data: {{ month_user_attend.legend | safe }}#}
{#            },#}
{#            grid: {#}
{#                left: '3%',#}
{#                right: '4%',#}
{#                bottom: '3%',#}
{#                containLabel: true#}
{#            },#}
{#            toolbox: {#}
{#                feature: {#}
{#                    magicType: {type: ['line', 'bar']},#}
{#                    saveAsImage: {}#}
{#                }#}
{#            },#}
{#            xAxis: {#}
{#                type: 'category',#}
{#                boundaryGap: false,#}
{#                data: {{ month_user_attend.xAxis_data | safe }}#}
{#            },#}
{#            yAxis: {#}
{#                type: 'value'#}
{#            },#}
{#            series: [#}
{#                {% for mmds in month_user_attend.series %}#}
{#                {#}
{#                    name: '{{ mmds.user | safe }}',#}
{#                    type: 'line',#}
{#                    stack: '总量',#}
{#                    data: {{ mmds.data | safe }}#}
{#                },#}
{#                {% endfor %}#}
{#            ]#}
{#        };#}
{##}
{#        // 使用刚指定的配置项和数据显示图表。#}
{#        userMonthStatics.setOption(option);#}
{#    </script>#}

{% endblock %}